<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML文本与图片标签</title>
  <style>
      body {
          font-family: Arial, sans-serif;
          line-height: 1.6;
          margin: 0 auto;
          max-width: 800px;
          padding: 20px;
      }
      h1, h2 {
          color: #2c3e50;
      }
      img {
          border: 2px solid #ddd;
          border-radius: 4px;
          padding: 5px;
          max-width: 100%;
          height: auto;
      }
      .example-box {
          background-color: #f8f9fa;
          padding: 15px;
          border-radius: 5px;
          margin: 20px 0;
      }
      /* 新增：标签作用说明模块样式 */
      .tag-intro {
          background-color: #e3f2fd;
          border-left: 4px solid #2196f3;
          padding: 12px 18px;
          margin: 15px 0;
          border-radius: 0 4px 4px 0;
      }
      .tag-intro h3 {
          margin-top: 0;
          color: #1976d2;
          font-size: 1.1rem;
      }
      .tag-intro p {
          margin: 8px 0;
          line-height: 1.5;
      }
      .tag-intro code {
          background-color: #fff;
          padding: 2px 6px;
          border-radius: 2px;
          color: #d32f2f;
      }
      hr {
          margin: 30px 0;
          border: none;
          border-top: 1px solid #ddd;
      }
  </style>
</head>
<body id="top">
  <!-- <h1>：一级标题标签，用于页面主标题，一个页面建议只使用1个，强调核心主题 -->
  <h1>HTML文本与图片标签应用示例</h1>
 
  <!-- 新增：核心标签作用总览模块，提前明确关键标签功能 -->
  <div class="tag-intro">
      <h3>核心标签作用提前说明</h3>
      <p><code>&lt;h1&gt;/&lt;h2&gt;</code>：标题标签，h1为最高级（页面主标题），h2为次级（模块标题），用于划分内容层级；</p>
      <p><code>&lt;p&gt;</code>：段落标签，用于包裹普通文本内容，自动实现文本换行和段落间距；</p>
      <p><code>&lt;img&gt;</code>：图片标签，用于嵌入图片，必须包含src（图片地址）和alt（替代文本）属性；</p>
      <p><code>&lt;figure&gt;+&lt;figcaption&gt;</code>：图片组合标签，figure包裹图片，figcaption添加图片说明，确保媒体信息完整；</p>
      <p><code>&lt;a&gt;</code>：超链接标签，用于实现页面内跳转或跨页面跳转，href属性指定目标地址。</p>
  </div>
 
  <!-- <h2>：二级标题标签，用于划分页面模块，此处为“文本格式化标签”模块的标题 -->
  <h2>1. 文本格式化标签</h2>
  <div>
      <!-- <p>：段落标签，用于包裹普通说明文本，实现文本的独立段落展示 -->
      <p>这是一个普通段落，使用&lt;p&gt;标签定义，自动与其他内容保持段落间距。</p>
     
      <!-- <strong>：加粗强调标签，用于突出重要文本（语义上的强调，非仅视觉加粗）；<em>：斜体强调标签，用于轻微强调文本 -->
      <p>可以使用<strong>strong标签进行加粗强调（重要内容）</strong>，或者<em>em标签进行斜体强调（补充说明）</em>。</p>
     
      <!-- <mark>：文本高亮标签，用于突出显示关键文本；<ins>：插入文本标签，表“新增内容”；<del>：删除文本标签，表“已删除内容” -->
      <p>还可以<mark>使用mark标签高亮文本（如关键词）</mark>，添加<ins>下划线（插入文本，表新增）</ins>，或<del>删除线（删除文本，表废弃）</del>。</p>
     
      <!-- <sub>：下标标签，用于数学公式或化学符号的下标；<sup>：上标标签，用于公式上标或注释引用 -->
      <p>科学公式示例：H<sub>2</sub>O（水，sub标签实现“2”下标）和E=mc<sup>2</sup>（相对论，sup标签实现“2”上标）</p>
     
      <!-- <code>：代码标签，用于包裹单行代码，保持代码格式并赋予特殊样式（如等宽字体） -->
      <p>代码展示：<code>document.getElementById("example")</code>（code标签展示单行代码，确保代码可读性）</p>
     
      <!-- <blockquote>：引用标签，用于包裹长引用文本，自动实现左侧缩进，表“引用他人内容” -->
      <blockquote>
          这是blockquote标签创建的引用块（如引用名言、文献），通常用于引用较长的文本段落，视觉上与普通文本区分。
      </blockquote>
     
      <!-- <pre>：预格式化标签，用于包裹需要保留空格和换行的内容（如多行代码），完全按照编写格式显示 -->
      <pre>
预格式化文本使用pre标签，
会保留文本中的
空格和
换行格式，
非常适合展示多行代码（无需手动调整格式）。
      </pre>
  </div>
 
  <!-- <hr>：水平线标签，用于分割页面不同模块，实现视觉上的内容分区 -->
  <hr>
 
  <!-- <h2>：二级标题标签，此处为“图片标签应用”模块的标题 -->
  <h2>2. 图片标签应用</h2>
  <div>
      <p>基本图片嵌入（使用img标签）：</p>
      <!-- <img>：图片标签，src属性指定图片地址，alt属性为“图片加载失败时的替代文本”，title属性为“鼠标悬停时的提示文本” -->
      <img src="https://picsum.photos/600/400?random=1" alt="山水风景照片，展示自然景观（加载失败时显示）" title="山水风景（鼠标悬停查看）">
     
      <p>带有说明的图片组合：</p>
      <!-- <figure>：媒体容器标签，用于包裹图片/图表等；<figcaption>：媒体说明标签，用于添加图片的文字说明 -->
      <figure>
          <img src="https://picsum.photos/600/300?random=2" alt="城市建筑照片，展示现代都市景观" title="城市建筑">
          <figcaption>图1：现代城市建筑景观（figcaption标签添加图片说明，与图片绑定）</figcaption>
      </figure>
     
      <p>图片链接（将图片作为超链接）：</p>
      <!-- <a>：超链接标签，href指定跳转目标（此处为大图地址），target="_blank"表“新窗口打开”；内部包裹img标签，实现“点击图片跳转” -->
      <a href="https://picsum.photos/800/600?random=3" target="_blank" rel="noopener">
          <img src="https://picsum.photos/300/200?random=3" alt="缩略图，点击可查看大图" title="点击查看大图">
          <br>点击图片查看大图（a标签包裹图片，实现图片跳转功能）
      </a>
  </div>
 
  <!-- <a>：超链接标签，href="#top"为“页面内锚点跳转”，#top对应body标签的id="top"，实现“返回页面顶部”功能 -->
  <p><a href="#top">返回页面顶部（a标签实现页面内锚点跳转）</a></p>
</body>
</html>
